<div id="top-menu">
  <div class="container">
    <div id="top-menu-section" class="visible-lg {{ menu_class }}">
      <div id="top-menu-section-out">
        {{ text_top_category }}
      </div>
      {% if categories %}
        <div id="menu-category-all">
          <ul id="menu-category-out">
            {% for key, category in categories %}
              {% if category.top_count == false %}
                <li class="out-section normal-section">
              {% else %}
                <li class="out-section">
              {% endif %}
                <div class="item">
                  <div class="item-link"><a href="{{ category.href }}" target="_blank" title="{{ category.name }}">{{ category.name }}</a></div>
                  {% if category.top_count %}
                    <div class="item-recommend">
                      {% for child in category.children %}
                        {% if child.is_top %}
                          <a href="{{ child.href }}" target="_blank" title="{{ child.title }}">{{ child.title }}</a>
                        {% endif %}
                      {% endfor %}
                    </div>
                  {% endif %}
                  <div class="deliver"></div>
                </div>
                {% if category.children %}
                <div class="menu-section-main mm-{{ key }}">
                  <h3 class="menu-category-head">{{ category.name }}</h3>
                  {% for child in category.children %}
                  <dl>
                    {% if child.is_top == false %}
                      <dt><a href="{{ child.href }}" target="_blank"><span>{{ child.title }}</span> <i class="iconfont">&#xe604;</i></a></dt>
                      {% if child.sub_children %}
                        <dd>
                        {% for third_child in child.sub_children %}
                          <a href="{{ third_child.href }}" target="_blank">{{ third_child.title }}</a>
                        {% endfor %}
                        </dd>
                      {% endif %}
                    {% endif %}
                  </dl>
                  {% endfor %}
                  {% if category.products %}
                    <div class="menu-products">
                      {% for product in category.products %}
                        <div class="menu-products-item">
                          <a href="{{ product.href }}" target="_blank" title="{{ product.name }}">
                            <img src="{{ product.thumb }}" alt="{{ product.name }}" class="img-responsive"/>
                            <p class="name">{{ product.name }}</p>
                            {% if product.price %}
                              <p class="price">
                                {% if not product.special %}
                                  {{ product.price }}
                                {% else %}
                                  <span class="price-new">{{ product.special }}</span>
                                  <span class="price-old">{{ product.price }}</span>
                                {% endif %}
                                {% if product.tax %} <span class="price-tax">{{ text_tax }} {{ product.tax }}</span> {% endif %} </p>
                            {% endif %}
                          </a>
                        </div>
                      {% endfor %}
                    </div>
                  {% endif %}
                </div>
                {% endif %}
              </li>
            {% endfor %}
          </ul>
        </div>
      {% endif %}
    </div>
    <div id="top-menu-all">
      <ul>
        <li><a href="{{ home }}">{{ text_home }}</a></li>
        {% if menus %}
          {% for menu in menus %}
            <li><a href="{{ menu.href }}" target="_blank">{{ menu.title }}</a></li>
          {% endfor %}
        {% endif %}
      </ul>
    </div>
  </div>
</div>